let inputValue = query('.search');
let goButton = query('.serchButt');
let box = query('.iconBackBoxAll');
let addToList = query('.addTo');
let alerts = query('.alerts');
let alert_box = query('.alert');
let backmask = query('.backmask');
let close = query('.close');
let webName = query('.webName');
let webLink = query('.webLink');
let webIcon = query('.webIcon');
let isShow = false;
let souurceNode;

window.onload = function() {
	inputValue.focus();
};
		
datas.forEach((data,index)=>{
	box.insertAdjacentHTML("beforeEnd",`
	<div draggable="true" onclick="toGo('${data.url}')" class="iconBackBox ">
		<div class="iconBackBoxImg">
			<img draggable="false" src="${data.icon}" alt="">
		</div>
		<div draggable="false">
			<p>${data.name}</p>
		</div>
		<div draggable="false" class="del" data-index="${index}" onclick="deletes(this)">
			x
		</div>
	</div>
	`); 
});
box.insertAdjacentHTML("beforeEnd",`
<div class="iconBackBox addNew">
<div class="iconBackBoxImg">
	<span style="font-size:30px;color: #999d9c;font-weight: bold;">+</span>
</div>
	<div>
		<p style="font-size: 20px;">新增</p>
	</div>
</div>
`); 

let add = query('.addNew');

checkShow()
function deletes(e){
	let index = e.getAttribute('data-index');
	datas.splice(index,1);
	localStorage.setItem("datas",JSON.stringify(datas))
	alert('删除咯(・-・*)')
	location.reload()
}
addToList.onclick = () =>{
	addToLists()
}
add.onclick = () =>{
	toAdd()
};
close.onclick = () =>{
	webName.value = ''
	webLink.value = ''
	webIcon.value = ''
	isShow = !isShow
	checkShow()
}

goButton.onclick = (event) =>{
	search(inputValue.value,'baidu')
}
goButton.nextElementSibling.onclick = (event) =>{
	search(inputValue.value,'google')
}

document.onkeydown = (e) =>{
	if (e.keyCode == 13) {
		search(inputValue.value);
	}
}

box.ondragstart = e =>{
	setTimeout(() => {
		e.target.classList.add('moving')
		let childrens = Array.from(e.target.children)
		childrens.forEach(child => {
			child.classList.add('moving');
		  });
	}, 0);
	souurceNode = e.target
	e.dataTransfer.effrctAllowed = "move"
}
box.ondragover = e =>{
	e.preventDefault()
}
box.ondragenter = e =>{
	e.preventDefault()
	if(e.target === box || e.target === souurceNode){
		return
	}
	const children = Array.from(box.children)
	const souurceIndex = children.indexOf(souurceNode)
	const targetIndex = children.indexOf(e.target)
	
	try {
		if(souurceIndex<targetIndex){
			box.insertBefore(souurceNode,e.target.nextElementSibling)
		}else{
			box.insertBefore(souurceNode,e.target)
		}
		if(souurceIndex === null || targetIndex === null || targetIndex>datas.length-1){
			return
		}
		swapArrayElements(datas,souurceIndex,targetIndex)
		localStorage.setItem("datas",JSON.stringify(datas))
	} catch (error) {

	}
}

box.ondragend = (e) =>{
	e.target.classList.remove('moving')
	let childrens = Array.from(e.target.children)
	childrens.forEach(child => {
		child.classList.remove('moving');
		});
}

function toGo(url){
	window.location.href = url
}

function swapArrayElements(arr, indexA, indexB) {
	const temp = arr[indexA];
	arr[indexA] = arr[indexB];
	arr[indexB] = temp;
  }

function addToLists(){
	let newDate = {name:webName.value,url:webLink.value,icon:webIcon.value?webIcon.value:'./img/kaiche.gif'}
	let dateUrl = newDate.url
	if(dateUrl==''){
		alert('你是不是忘了填写URL(￣△￣；)')
		return
	}
	let b = datas.some(function(dui){
			return dateUrl === dui.url;
	})
	if(b){
		alert('已经添加过这个Url啦(￣△￣；)')
		location.reload()
		return
	}
	
	datas.push(newDate)
	localStorage.setItem("datas",JSON.stringify(datas))
	alert('添加好啦(๑•̀ㅂ•́)و✧')
	location.reload()
}
function toAdd(){
	isShow = !isShow
	checkShow()
}

function checkShow(){
	if(!isShow){
		alert_box.style.marginTop = '-200px'
		alert_box.style.filter='blur(50px)'
		alert_box.style.opacity = '0'
		setTimeout(()=>{
			backmask.style.opacity = '0'
			setTimeout(()=>{
				alerts.style.display = 'none'
			},300)
		},300)
	}else{
		alerts.style.display = 'block'
		setTimeout(()=>{
			backmask.style.opacity = '1'
			setTimeout(()=>{
				alert_box.style.marginTop = '-300px'
				alert_box.style.filter='blur(0px)'
				alert_box.style.opacity = '1'
			},300)
		},300)
	}
}
function search(url,where='baidu'){
	let go = {
		google:'https://www.google.com/search?q=',
		baidu:'https://www.baidu.com/s?wd='
	}
	if(url){
		window.location = go[where]+url
	}else{
		alert('要输入东西才能搜索吖!')
	}
}
function query(name){
	return document.querySelector(name)
}

function setzero(){
	localStorage.setItem("datas",0)
	location.reload()
}